<template>
  <div>
    <div class="my_title">
      <img
        src="http://liufusong.top:8080/img/avatar.png"
        alt="背景图片"
        class="my_img"
      />
      <div class="my_info">
        <div class="my_icon">
          <img :src="baseURL+userInfo.avatar" alt="" />
        </div>
        <div class="my_user" v-if="isUser">
          <p class="name">{{userInfo.nickname}}</p>
          <button @click="outFn">退出</button>
          <p class="change">编辑个人资料</p>
        </div>
        <div class="no_user" v-else>
          <p class="name">游客</p>
          <button @click="$router.push({ path: '/login' })" class="other">
            去登陆
          </button>
        </div>
      </div>
    </div>
    <van-row>
      <van-col span="8" @click="$router.push({ path: '/favorate' })">
        <van-icon name="star-o" />
        <p>我的收藏</p>
      </van-col>
      <van-col span="8" @click="$router.push({ path: '/rent' })"
        ><van-icon name="wap-home-o" />
        <p>我的出租</p></van-col
      >
      <van-col span="8"
        ><van-icon name="clock-o" />
        <p>看房记录</p></van-col
      >
      <van-col span="8"
        ><van-icon name="debit-pay" />
        <p>成为房主</p></van-col
      >
      <van-col span="8"
        ><van-icon name="contact" />
        <p>个人资料</p>
      </van-col>
      <van-col span="8"
        ><van-icon name="service-o" />
        <p>联系我们</p></van-col
      >
    </van-row>
    <div class="bottom">
      <img src="http://liufusong.top:8080/img/profile/join.png" alt="" />
    </div>
  </div>
</template>

<script>
import { Dialog, Toast } from 'vant'
import { mapMutations } from 'vuex'
import store from '../../store'
import { userInfoApi } from '@/api'
import { baseURL } from '@/utiles/request.js'

export default {
  data () {
    return {
      isUser: true,
      userInfo: {},
      baseURL
    }
  },
  async  activated () {
    const res = await userInfoApi()
    if (!store.state.token) {
      this.isUser = false
      return
    }
    this.userInfo = res.data.body
    if (res.data.status === 400) {
      Toast('登录失效，请重新登录')
      this.isUser = false
    }
  },
  methods: {
    ...mapMutations(['setToken']),
    fn () {
      console.log(1)
      this.$router.push({ path: '/rent' })
    },
    outFn () {
      // console.log(1)
      Dialog.confirm({
        title: '提示',
        message: '是否确定退出',
        confirmButtonText: '退出'
      })
        .then(() => {
          this.isUser = false
          this.setToken('')
        })
        .catch(() => {
          // on cancel
        })
    }
  }
}
</script>

<style lang="less" scoped>
.my_title {
  min-height: 300px;
  position: relative;
  .my_img {
    width: 100%;
  }
  .my_info {
    position: absolute;
    background: #fff;
    width: 85%;
    height: 55%;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 0 10px 3px #ddd;
    margin: 50px auto 0;
    padding: 0 20px;
    text-align: center;
    font-size: 13px;
    .my_icon {
      position: relative;
      transform: translateY(-50%);
      border-radius: 50%;
      width: 70px;
      height: 70px;
      border: 5px solid #f5f5f5;
      display: inline-block;
      box-shadow: 0 2px 2px #bdbdbd;
      img{
        width: 100%;
      }
    }
  }
  .name {
    margin-top: -30px;
    margin-bottom: 10px;
  }
  button {
    border-radius: 30px;
    color: #fff;
    padding: 2px 15px;
    background: #21b97a;
    font-size: 12px;
    border: none;
  }
  .change {
    color: #999;
    font-size: 12px;
    margin-top: 20px;
    margin-top: 10px;
  }
  .other{
    height: 30px;
    border-radius: 5px;
  }
}
.van-row {
  text-align: center;
  .van-col {
    padding: 20px 0;
    font-size: 13px;
    color: #333;
  }
  .van-icon {
    font-size: 20px;
  }
  p {
    margin-top: 10px;
  }
}
.bottom {
  width: 100%;
  img {
    width: 100%;
  }
}
</style>
